<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>科创研究成果平台</title>
		<link href="css/main.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="../bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
		<script src="../js/jquery-2.1.0.min.js" type="text/javascript"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js"></script>
		<script type="text/javascript" src="../bootstrap/dist/js/bootstrap.js"></script>
		<script src="js/common.js" type="text/javascript"></script>
		<style type="text/css">
			a {
				text-decoration: none
			}
			
			boby {
				background-color: #EFEFEF
			}
			
			.activity-item-container {
				padding-bottom: 50px;
			}
			
			.content-container {
				margin: 0 auto;
				margin-top: 100px;
				width: 1240px;
				min-height: 100vh;
			}
			
			.item-catalog-container {
				margin-top: 30px;
				margin-bottom: 28px;
				width: 100%;
			}
			
			.item-catalog-container .catalog-item {
				display: inline-block;
			}
			
			.item-container .item-head {
				position: relative;
			}
			
			.item-container .item-head .card {
				padding: 24px;
				height: 300px;
			}
			
			.card {
				padding: 18px;
				background-color: #fff;
				border: .5px solid #eee;
				box-shadow: 0 0 0.5px rgba(0, 0, 0, .2);
			}
			
			.item-container .item-head-img-container {
				padding-left: 0;
				height: 100%;
			}
			
			.item-container .item-head-img {
				height: 100%;
				background-color: #1f86ed;
			}
			
			.activity-item-container .item-head-text .member-offer {
				float: left;
				margin-top: 3px;
				margin-right: 10px;
				height: 21px;
				width: 92px;
				background: url(/images/tag/member-offer.png);
			}
			
			.activity-item-container .item-head .attribute {
				margin-bottom: 0;
			}
			
			.item-container .item-head-text .attribute {
				font-size: 17px;
				line-height: 1.8;
			}
			
			.m-cover {
				background-color: #1f86ed;
				background-size: cover;
				background-position: 50%;
				background-repeat: no-repeat;
			}
			
			.activity-item-container .item-head-btn-container {
				display: -ms-flexbox;
				display: flex;
				-ms-flex-pack: justify;
				justify-content: space-between;
				width: 100%;
				height: 45px;
				margin-top: 50px;
			}
			
			.item-container .item-head-btn-func {
				padding: 7.5px 30px;
				width: 170px;
				font-size: 20px;
			}
			
			.activity-item-container .item-head-btn-container .btn-caption {
				-ms-flex-positive: 1;
				flex-grow: 1;
				-ms-flex-item-align: end;
				align-self: flex-end;
				color: #898989;
			}
			
			.container-fluid {
				padding-right: 15px;
				padding-left: 15px;
				margin-right: auto;
				margin-left: auto;
			}
			
			.row {
				margin-right: -15px;
				margin-left: -15px;
			}
			
			.item-container .item-content {
				margin-top: 20px;
				padding-left: 0;
				padding-right: 0;
				width: 100%;
			}
			
			.card {
				padding: 18px;
				background-color: #fff;
				border: .5px solid #eee;
				box-shadow: 0 0 0.5px rgba(0, 0, 0, .2);
			}
			
			.item-container .item-content .sub-title {
				margin-top: 0;
				margin-bottom: 20px;
				padding-left: 15px;
				height: 36px;
				line-height: 36px;
				font-size: 20px;
				font-weight: 700;
				color: #1f86ed;
				border-left: 10px solid #1f86ed;
			}
			
			.fr-view {
				text-indent: 0;
			}
			
			.activity-item-container .item-body .divider {
				margin-top: 20px;
				margin-bottom: 20px;
				border-bottom: 1px solid #eee;
			}
		</style>
	</head>

	<body style="background-color: #EFEFEF">
		<!--头部-->
		<header>
			<div class="beijing">
				<h2 style="font-weight:bold;font-size: 18px;">
		<a href="index.html" style="text-decoration : none"><em>
		<font color="white">科创研究成果平台</font></em></a>
		</h2>
				<ul>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="index.html">首页</a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="news.html">资讯<em></em></a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="act.html">活动<em></em></a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="tech.html">技术<em></em></a>
					</li>
					<li>
						<a class="menu_1 hover" style="text-decoration : none" href="cooper.html">合作<em></em></a>
					</li>
					<li>
						<a class="menu_1 " style="text-decoration : none" href="person.html">个人中心<em></em></a>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</header>

		<!--主体-->
		<div class="content-container item-container activity-item-container">
			<div class="item-catalog-container">
				<div class="catalog-item">
					<a href="#" style="color: #707070" class="nuxt-link-active">首页</a>
					&gt;
				</div>
				<div class="catalog-item">
					<a href="#" style="color: #707070" class="nuxt-link-active">需求</a>
					&gt;
				</div>
				<div class="catalog-item">
					<a href="javascript:void(0)" style="color: #707070">需求详情</a>
				</div>
			</div>

			<div class="item-head">
				<div class="clearfix card">
					<div class="col-xs-12 item-head-text">
						<div>
						    <input type="hidden" id="require_id"/>
						    <input type="hidden" id="require_userid"/>
							<h3 class="title" id="require_name"></h3>
							<p class="attribute">
								企业名称：<span id="require_companyname"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								企业规模：<span id="require_companyscale"></span>
							</p>
							<p class="attribute">
								主营业务：<span id="require_companybusiness"></span>
							</p>
							<p class="attribute">
                                                                                联系电话：<span id="require_telphone"></span>
                            </p>
                            <p class="attribute">
                                                                                研发经费：<span id="require_price"></span>
                            </p>
                            <p class="attribute">
                                                                                研发周期：<span id="require_cycle"></span>
                            </p>
						</div>
						<div class="item-head-btn-container" style="margin-top: 10px;">
							
						</div>
					</div>
				</div>
			</div>
			<div class="container-fluid item-body">
				<div class="row">
					<div id="leftAlign" class="col-xs-9 item-content">
						<div class="card">
							<h4 class="sub-title">需求详述</h4>
							<div class="fr-view" id="require_detail"></div>
						</div>
					</div>
				</div>
			</div>
			
			
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			                <h4 class="modal-title" id="myModalLabel">联系需求方</h4>
			            </div>
			            <div class="modal-body">
			                 <form role="form">
								  <div class="form-group">
								    <label for="name">姓名</label>
								    <input type="text" disabled class="form-control" id="username" placeholder="姓名" autocomplete="off"/>
								  </div>
								  <div class="form-group">
								    <label for="org">组织机构名称</label>
								    <input type="text" disabled class="form-control" id="org" placeholder="组织机构名称" autocomplete="off" />
								  </div>
								  <div class="form-group">
								     <label for="org">合作意愿</label>
								     <select class="form-control" id="cooperWill">
									      <option value="作为技术顾问提供咨询服务">作为技术顾问提供咨询服务</option>
									      <option value="承接企业项目，解决具体研发需求">承接企业项目，解决具体研发需求</option>
									      <option value="技术入股项目公司">技术入股项目公司</option>
									      <option value="其他">其他</option>
								     </select>
								  </div>
								  <div class="form-group">
								    <label for="consult">咨询内容</label>
								    <textarea id="consult" class="form-control" rows="3"></textarea>
								  </div>
							</form>
			            </div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button id="submitCooper" type="button" class="btn btn-primary">提交</button>
			            </div>
			        </div>
			    </div>
			</div>
			<!-- /.modal -->
			<script>
				$(function() {
				    $('#myModal').modal('hide');
				    
				    $("#submitCooper").click(function(){
				    	var data={"requirementId":$("#require_id").val(),"requirementName":$("#require_name").html()
	                            ,"provider":getCookie("userid"),"cooperWill":$("#cooperWill").val(),"consult":$("#consult").val(),
	                            "requirer":$("#require_userid").val()
	                    }
				    	$.ajax({
				    		url:"/cooperation/insert",
				    		type:"post",
				    		data:JSON.stringify(data),
				    		contentType: "application/json; charset=utf-8",
				    		success:function(res){
				    			alert("提交成功");
				    			location.reload();
				    		}
				    	})
				    })
				});
			</script>
	</body>

</html>
<script type="text/javascript">
	function getQueryStringByName(name) {
		var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
		if(result == null || result.length < 1) {
			return "";
		}
		return result[1];
	}
	
	$(document).ready(function() {
		var id = getQueryStringByName("id");
		if(id == null) {
			alert("无数据!");
			return;
		}
		
		$.ajax({
			type: "GET",
			dataType: "json",
			url: '/requirement/info/' + id,
			success: function(res) {
				if(res != null) {
					$("#require_name").html(res.data.name);
					$("#require_companyname").html(res.data.companyname);
					$("#require_companyscale").html(res.data.companyscale);
					$("#require_companybusiness").html(res.data.companybusiness);
					$("#require_telphone").html(res.data.telphone);
					$("#require_price").html(res.data.price);
					$("#require_cycle").html(res.data.cycle);
					$("#require_id").val(res.data.id);
					$("#require_detail").html(res.data.detail);
					$("#require_userid").val(res.data.userid);
				} else {
					alert("无数据!");
				}
			}
		});
		
		//查询是否已联系过需求方
		var userid=getCookie("userid");
		if(userid==null||userid==''){
			let h=`<div id="canjoin" onclick="javascript:joinAct()" class="btn btn-primary item-head-btn-func">联系需求方</div>`;
			$(".item-head-btn-container").append(h);
			return;
		}
		$.ajax({
            type: "post",
            data:{'provider':userid,'requirementId':id},
            dataType: "json",
            url: '/cooperation/selectByUseridAndRequireid',
            success: function(res) {
                if(res.resultCode ==200) {
                	$(".item-head-btn-container").children().remove();
                    let h=`<div id="canjoin" onclick="javascript:joinAct()" class="btn btn-primary item-head-btn-func">联系需求方</div>`;
                    $(".item-head-btn-container").append(h);
                } else {
                	$(".item-head-btn-container").children().remove();
                	let h=`<div id="hadjoin" class="btn btn-danger item-head-btn-func" disabled="disabled">已咨询</div>`;
                    $(".item-head-btn-container").append(h);
                }
            }
        });
	})
	
	
	function joinAct(){
		//检查是否登录
		var userid=getCookie("userid");
        if(userid==null||userid==''){
        	alert("未登录！");
        	window.location.href='login.html';
        }else{
        	var requireid=$("#require_id").val();
        	//查询用户信息
        	$.ajax({
        		type: "get",
                dataType: "json",
                url: '/user/info/'+userid,
                success:function(res){
                	$("#username").val(res.data.username);
                	$("#org").val(res.data.orgname);
                }
        	})
        	$('#myModal').on('hide.bs.modal');
        	$('#myModal').modal('show')
        }
	}
</script>